<template>
	<div>
		<h3>默认设置：</h3>
		<table border="1px" bordercolor="#ccc" cellspacing="0">
			<thead>
				<tr class="thead">
					<th>
						<el-checkbox
							:label="defaultThead.checkAll.name"
							:indeterminate="defaultThead.checkAll.isIndeterminate"
							v-model="defaultThead.checkAll.checkAll"
							@change="handleCheckAll"
						></el-checkbox>
					</th>

					<th v-for="item in defaultThead.checkOther" :key="item.name" :colspan="item.marge">
						<el-checkbox
							:label="item.name"
							:indeterminate="item.isIndeterminate"
							v-model="item.checkAll"
							@change="handleCheckOther($event, item.name)"
						></el-checkbox>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="3">操作</td>
					<td v-for="item in defaultThead.checkOther[0].operate.one" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>

					<td v-for="item in defaultThead.checkOther[1].operate.one" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[2].operate.one" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[3].operate.one" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
				</tr>

				<tr>
					<td v-for="item in defaultThead.checkOther[0].operate.two" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[1].operate.two" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[2].operate.two" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[3].operate.two" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
				</tr>

				<tr>
					<td v-for="item in defaultThead.checkOther[0].operate.three" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[1].operate.three" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[2].operate.three" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
					<td v-for="item in defaultThead.checkOther[3].operate.three" :key="item.id">
						<el-checkbox
							v-if="item.name"
							:label="item.name"
							v-model="item.check"
							@change="handleCheckOperateSite($event, item.fatherName)"
						></el-checkbox>
						<span v-else></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	// import { operate } from "@/utils";
	export default {
		data() {
			return {
				isIndeterminate: true,
				checkAll: false,
				cites: ['上海', '北京', '广州', '深圳'],
				checkedCites: ['深圳', '广州'],
				defaultThead: {
					checkAll: {
						name: '全选',
						isIndeterminate: false,
						checkAll: false,
						checkedGroup: []
					},
					checkOther: [
						{
							name: '站点',
							isIndeterminate: false,
							checkAll: false,
							marge: 6,
							operate: {
								one: [
									{ name: '查看', check: false, id: 10, fatherName: '站点' },
									{ name: '修改', check: false, id: 11, fatherName: '站点' },
									{ name: '导出', check: false, id: 12, fatherName: '站点' },
									{ name: '预览', check: false, id: 13, fatherName: '站点' },
									{ name: '回收站', check: false, id: 14, fatherName: '站点' },
									{ name: '新增频道', check: false, id: 15, fatherName: '站点' }
								],
								two: [
									{ name: '', check: false, id: 16, fatherName: '站点' },
									{ name: '删除', check: false, id: 17, fatherName: '站点' },
									{ name: '导入', check: false, id: 18, fatherName: '站点' },
									{ name: '发布', check: false, id: 19, fatherName: '站点' },
									{ name: '', check: false, id: 20, fatherName: '站点' },
									{
										name: '批量新增频道',
										check: false,
										id: 21,
										fatherName: '站点'
									}
								],
								three: [
									{ name: '', check: false, id: 22, fatherName: '站点' },
									{ name: '复制', check: false, id: 23, fatherName: '站点' },
									{ name: '', check: false, id: 24, fatherName: '站点' },
									{ name: '', check: false, id: 25, fatherName: '站点' },
									{ name: '', check: false, id: 26, fatherName: '站点' },
									{
										name: '频道回收站',
										check: false,
										id: 27,
										fatherName: '站点'
									}
								]
							}
						},
						{
							name: '频道',
							isIndeterminate: false,
							checkAll: false,
							marge: 5,
							operate: {
								one: [
									{ name: '查看', check: false, id: 20, fatherName: '频道' },
									{ name: '新增', check: false, id: 21, fatherName: '频道' },
									{ name: '复制', check: false, id: 22, fatherName: '频道' },
									{ name: '预览', check: false, id: 23, fatherName: '频道' },
									{ name: '文章新增', check: false, id: 24, fatherName: '频道' }
								],
								two: [
									{ name: '', check: false, id: 25, fatherName: '频道' },
									{ name: '修改', check: false, id: 26, fatherName: '频道' },
									{ name: '移动', check: false, id: 27, fatherName: '频道' },
									{ name: '发布', check: false, id: 28, fatherName: '频道' },
									{
										name: '文章回收站',
										check: false,
										id: 29,
										fatherName: '频道'
									}
								],
								three: [
									{ name: '', check: false, id: 30, fatherName: '频道' },
									{ name: '删除', check: false, id: 31, fatherName: '频道' },
									{ name: '', check: false, id: 32, fatherName: '频道' },
									{ name: '', check: false, id: 33, fatherName: '频道' },
									{ name: '', check: false, id: 34, fatherName: '频道' }
								]
							}
						},
						{
							name: '文章',
							isIndeterminate: false,
							checkAll: false,
							marge: 5,
							operate: {
								one: [
									{ name: '查看', check: false, id: 30, fatherName: '文章' },
									{ name: '修改', check: false, id: 31, fatherName: '文章' },
									{ name: '复制', check: false, id: 32, fatherName: '文章' },
									{ name: '预览', check: false, id: 33, fatherName: '文章' },
									{ name: '流程', check: false, id: 34, fatherName: '文章' }
								],
								two: [
									{ name: '', check: false, id: 35, fatherName: '文章' },
									{ name: '删除', check: false, id: 36, fatherName: '文章' },
									{ name: '移动', check: false, id: 37, fatherName: '文章' },
									{ name: '发布', check: false, id: 38, fatherName: '文章' },
									{ name: '审核', check: false, id: 39, fatherName: '文章' }
								],
								three: [
									{ name: '', check: false, id: 40, fatherName: '文章' },
									{ name: '', check: false, id: 41, fatherName: '文章' },
									{ name: '共享', check: false, id: 42, fatherName: '文章' },
									{ name: '撤稿', check: false, id: 43, fatherName: '文章' },
									{ name: '', check: false, id: 44, fatherName: '文章' }
								]
							}
						},
						{
							name: '模板',
							isIndeterminate: false,
							checkAll: false,
							marge: 3,
							operate: {
								one: [
									{ name: '新增', check: false, id: 40, fatherName: '模板' },
									{ name: '导出', check: false, id: 41, fatherName: '模板' },
									{ name: '资源管理', check: false, id: 42, fatherName: '模板' }
								],
								two: [
									{ name: '修改', check: false, id: 45, fatherName: '模板' },
									{ name: '导入', check: false, id: 46, fatherName: '模板' },
									{ name: '', check: false, id: 447, fatherName: '模板' }
								],
								three: [
									{ name: '删除', check: false, id: 440, fatherName: '模板' },
									{ name: '', check: false, id: 441, fatherName: '模板' },
									{ name: '', check: false, id: 442, fatherName: '模板' }
								]
							}
						}
					]
				}
			}
		},
		methods: {
			handleCheckAll(e) {
				const checkOther = this.defaultThead.checkOther
				const checkAll = this.defaultThead.checkAll
				checkAll.isIndeterminate = false
				// 控制 操作这一层
				this.checkAllOperate(checkOther, e)
			},
			handleCheckOther(e, name) {
				const checkOther = this.defaultThead.checkOther
				const checkAll = this.defaultThead.checkAll
				// 控制全选
				checkAll.checkAll = checkOther.every(val => val.checkAll == true)
				checkOther.forEach(ee => {
					if (ee.name == name) {
						ee.isIndeterminate = false
					}
				})
				if (checkOther.every(val => val.checkAll == true)) {
					checkAll.isIndeterminate = false
				} else {
					checkAll.isIndeterminate = checkOther.some(val => val.checkAll == true)
				}
				// 控制 操作这一层
				this.checkOtherOperate(checkOther, name, e)
			},
			handleCheckOperateSite(e, fatherName) {
				const checkAll = this.defaultThead.checkAll
				const checkOther = this.defaultThead.checkOther
				const checkArr = this.getCheckArr(checkOther, fatherName)
				checkOther.forEach(v => {
					if (v.name == fatherName) {
						if (checkArr.every(ee => ee == true)) {
							v.checkAll = true
							v.isIndeterminate = false
						} else {
							v.checkAll = false
							v.isIndeterminate = checkArr.some(ee => ee == true)
						}
					}
				})
				this.$nextTick(() => {
					//  判断isD 属性的
					let flagIs = this.getOhterIsArr().every(e => e == false)
					let flagCheck = this.getCheckAllArr().every(e => e == true)
					if (flagCheck) {
						checkAll.checkAll = true
						checkAll.isIndeterminate = false
					} else {
						if (flagIs) {
							checkAll.checkAll = false
							checkAll.isIndeterminate = false
						} else {
							checkAll.checkAll = false
							checkAll.isIndeterminate = true
						}
					}
				})
			},

			getCheckArr(value = [], fatherName = '') {
				let checkArr = []
				value.forEach(val => {
					if (val.name == fatherName) {
						for (const key in val.operate) {
							val.operate[key].forEach(ee => {
								if (ee.name != '') {
									checkArr.push(ee.check)
								}
							})
						}
					}
				})
				return checkArr
			},
			getOhterIsArr() {
				const isArr = []
				this.defaultThead.checkOther.forEach(e => {
					isArr.push(e.isIndeterminate)
				})
				return isArr
			},
			getCheckAllArr() {
				const checkArr = []
				this.defaultThead.checkOther.forEach(e => {
					checkArr.push(e.checkAll)
				})
				return checkArr
			},
			checkOtherOperate(value = [], name = '', e) {
				value.forEach(val => {
					if (val.name == name) {
						for (const key in val.operate) {
							val.operate[key].forEach(ee => {
								ee.check = e
							})
						}
					}
				})
			},
			checkAllOperate(value = [], e) {
				value.forEach(val => {
					val.checkAll = e
					val.isIndeterminate = false
					// 操作内的选中
					for (const key in val.operate) {
						val.operate[key].forEach(ee => {
							ee.check = e
						})
					}
				})
			},
			handleCheckAllChange(e) {
				this.checkedCites = e ? this.cites : []
				this.isIndeterminate = false
				console.log(e)
			},
			handleCheckCitesChange(e) {
				this.checkAll = e.length === this.cites.length
				this.isIndeterminate = e.length > 0 && e.length < this.cites.length
				// console.log(this.checkAll); // 数组
			}
		}
	}
</script>

<style lang="scss" scoped>
	.thead {
		th {
			width: 200px;
			height: 20px;
		}
	}
</style>
